<script setup lang="ts">
import { h } from "vue";
import { ElButton, ElInput } from "element-plus";
import { useRouter } from "vue-router";

import useProTable from "@/hooks/useProTable";
import EnumTag from "@/components/common/EnumTag.vue";
import ProSelect from "@/modules/package/form/components/ProSelect.vue";

import ApiTicket from "@/api/ticket";
import {
  EnumTicketSnFrom,
  EnumTicketSnOpen,
  EnumTicketSnState,
} from "@/utils/enum";

const router = useRouter();

const tableColumns = [
  { label: "序号", type: "index", width: 70 },
  { label: "订单号", prop: "order_sn", minWidth: 160 },
  { label: "券码", prop: "sn", minWidth: 160 },
  { label: "券名", prop: "pkg_name", minWidth: 160 },
  { label: "所属活动", prop: "act_name", minWidth: 120 },
  { label: "场次", prop: "etime_name", minWidth: 120 },
  {
    label: "券来源",
    width: 120,
    slot: ({ row }: any) =>
      h(EnumTag, {
        options: EnumTicketSnFrom,
        value: row.from,
      }),
  },
  {
    label: "票券状态",
    width: 120,
    slot: ({ row }: any) =>
      h(EnumTag, {
        options: EnumTicketSnState,
        value: row.status,
      }),
  },
  {
    label: "平台状态",
    width: 120,
    slot: ({ row }: any) =>
      h(EnumTag, {
        options: EnumTicketSnOpen,
        value: row.sn_open,
        effect: "dark",
      }),
  },
  { label: "创建时间", prop: "create_time", width: 120 },
  {
    label: "操作",
    width: 100,
    slot: ({ row }: any) =>
      h(
        ElButton,
        {
          link: true,
          type: "primary",
          onClick: () => router.push(`/order/coupon/detail/${row.sn}`),
        },
        "详情"
      ),
  },
];

const formItems = [
  {
    col: 6,
    label: "券码",
    children: {
      type: ElInput,
      field: "sn",
      props: {
        clearable: true,
        placeholder: "请输入",
      },
    },
  },
  {
    col: 6,
    label: "订单编号",
    children: {
      type: ElInput,
      field: "order_sn",
      props: {
        clearable: true,
        placeholder: "请输入",
      },
    },
  },
  {
    col: 6,
    label: "票券来源",
    children: {
      type: ProSelect,
      field: "from",
      props: {
        clearable: true,
        options: EnumTicketSnFrom,
      },
    },
  },
  {
    col: 6,
    label: "票券状态",
    children: {
      type: ProSelect,
      field: "status",
      props: {
        clearable: true,
        options: EnumTicketSnState,
      },
    },
  },
  {
    col: 6,
    label: "平台状态",
    children: {
      type: ProSelect,
      field: "sn_open",
      props: {
        clearable: true,
        options: EnumTicketSnOpen,
      },
    },
  },
];

const [ProTable] = useProTable({
  fetchUrl: ApiTicket.ticketSnList,
  tableOptions: {
    columns: tableColumns,
  },
  formOptions: {
    formItems,
  },
});
</script>

<template>
  <ProTable />
</template>
